<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canva 绘图</title>
    <style>
        /* 加了这个后，canvas的宽高就变成了 500 * 500绘制直线时(线宽设大)发现形变了，所以不推荐使用 */
        /* canvas {
            border: 1px solid red;
            width: 500px;
            height: 500px;
        }  */
    </style>
</head>

<body>

    <h1>
        canvas 的使用2使用js生成canvas
    </h1>

    <script>
        // 内联试Js
        // 通过DOM 树状 document.createElement 生成画布
        // 1 获取 canvas 元素
        // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas
        let canvas = document.createElement("canvas");
        canvas.style.border = "1px dashed red";
        // 2 把canvas 添加到body中
        document.body.appendChild(canvas);
        // 3 设置canvas的宽高 默认 300 * 150
        canvas.width = 800;
        canvas.height = 500;
        // // 4 获取画笔
        let ctx = canvas.getContext("2d");
        // 5 绘制 曲线
        ctx.lineWidth = 20; // 线宽
        ctx.strokeStyle = "red"; // 线条颜色
        // ctx.beginPath(); // 开始绘制
        // ctx.moveTo(100, 100);
        // ctx.quadraticCurveTo(200, 200, 300, 100);
        // ctx.quadraticCurveTo(400, 0, 500, 100);

        // (圆弧)曲线 前三个参数是圆点以及半径，第四个参数是起始弧度，第五个参数是结束弧度，false表示顺时针，true表示逆时针
        // 弧度 = 角度 * Math.PI / 180
        ctx.arc(300, 300, 100, 90 * Math.PI / 180, Math.PI * 2 - 1, false);
        ctx.stroke(); // 绘制线条

        ctx.beginPath(); // 开始绘制
        ctx.moveTo(100, 100);
        ctx.arcTo(200, 200, 300, 100, 100);
        ctx.stroke(); // 绘制线条

        // ctx.beginPath(); // 开始绘制
        // ctx.moveTo(100, 300);
        // ctx.bezierCurveTo(200, 200, 400, 0, 500, 100);
        // ctx.stroke(); // 绘制线条

        // 椭圆
        ctx.beginPath(); // 开始绘制
        ctx.strokeStyle = "blue"; // 线条颜色
        ctx.lineWidth = 5; // 线宽
        // 参数：圆心坐标，椭圆的半长轴，半短轴，旋转角度，起始角度，结束角度，true表示逆时针
        ctx.ellipse(150, 300, 100, 50, Math.PI / 2, 0, Math.PI * 2, true);
        ctx.stroke(); // 绘制线条

        // 画圆形
        ctx.beginPath(); // 开始绘制
        ctx.strokeStyle = "green"; // 线条颜色
        ctx.lineWidth = 5; // 线宽
        // 参数：圆心坐标，半径，起始角度，结束角度，true表示逆时针
        ctx.arc(400, 300, 50, 0, Math.PI * 2, true);
        ctx.stroke(); // 绘制线条

        // 画 三角形
        ctx.beginPath(); // 开始绘制
        ctx.strokeStyle = "yellow"; // 线条颜色
        ctx.lineWidth = 5; // 线宽
        ctx.moveTo(500, 300);
        ctx.lineTo(600, 300);
        ctx.lineTo(550, 400);
        ctx.closePath(); // 闭合路径
        // ctx.fillStyle = "yellow";
        // ctx.fill(); // 填充

        ctx.stroke(); // 绘制线条



    </script>
</body>

</html>